<template>
    <div class="">
        <div class="top"></div>
        <div class="us-title">
            <br/>
            四川工商学院
            <br/>
            <br/>
            <p class="us-p">教室申请</p>
        </div>
        <div class="us-text">请填写完成下列信息：</div>
        <div class="us-main">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

                <el-form-item label="申请人" prop="studentName">
                    <el-input v-model="ruleForm.studentName"></el-input>
                </el-form-item>

                <el-form-item  label="学号/学工号" prop="studentId">
                    <el-input v-model="ruleForm.studentId"></el-input>
                </el-form-item>

                <el-form-item label="选择开始时间" prop="startTime">
                    <el-date-picker
                        v-model="ruleForm.startTime"
                        type="datetime"
                        style="width: 100%">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="选择结束时间" prop="endTime">
                <el-date-picker
                    v-model="ruleForm.endTime"
                    type="datetime"
                     style="width: 100%">
                </el-date-picker>
                </el-form-item>

                <el-form-item label="使用要求" prop="useDemand">
                    <el-input v-model="ruleForm.useDemand"></el-input>
                </el-form-item>
                <el-form-item label="使用理由" prop="useReason">
                    <el-input v-model="ruleForm.useReason" ></el-input>
                </el-form-item>
                <el-form-item label="其他备注" prop="remark">
                    <el-input v-model="ruleForm.remark" ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即申请</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                ruleForm: {
                    uuid:'',
                    studentName: '',
                    studentId: '',
                    startTime: '',
                    endTime: '',
                    useDemand: '',
                    useReason: '',
                    remark: '',
                    classroom:'',
                    applicationStatus: '',
                },
                rules: {
                    studentName: [
                        { required: true, message: '请输入申请人名字', trigger: 'blur' },
                    ],
                    studentId: [
                        { required: true, message: '请输入学号/学工号', trigger: 'blur' },
                    ],
                    useDemand: [
                        { required: true, message: '请输入使用要求', trigger: 'blur' },
                    ],
                    useReason: [
                        { required: true, message: '请输入使用理由', trigger: 'blur' },
                    ],
                    remark: [
                        { required: true, message: '请输入其他', trigger: 'blur' },
                    ],
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log(this.ruleForm.startTime)
                        this.$axios.post('text/application/insert?' +
                            'studentName=' + this.ruleForm.studentName +
                            "&studentId=" + this.ruleForm.studentId+
                            "&startTime=" + this.ruleForm.startTime+
                            "&endTime=" + this.ruleForm.endTime+
                            "&useDemand=" + this.ruleForm.useDemand+
                            "&useReason=" + this.ruleForm.useReason+
                            "&remark=" + this.ruleForm.remark+
                            "&classroom=" + '未分配'+
                            "&applicationStatus="+'待批准'
                        ).then((res) => {
                            if(res.data.code==200){
                                this.$message.info('申请已成功提交');
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>


<style scoped>
    @media (min-width:400px){

        .us-title{
            width: 100%;
            height:250px;
            text-align: center;
            font-size: 40px;
            font-weight: bolder;
            font-family: 宋体;
            background-image: url("../../assets/2.jpg");
        }
        .us-p{
            color: black;
            font-family: 华文行楷;
            font-size: 50px;
            font-weight: initial;
        }
        .us-main{
            text-align: center;
            width: 90%;
            margin: 0 auto;
        }
        .us-main button{
            width: 150px;
            height: 50px;
            border: 0px;
            font-family: 宋体;
            border-radius: 10px;
            font-size: 20px;
            font-style: inherit;
            color: white;
            margin: 5px 40px 10px 40px;

        }
        .us-text{
            margin-top: 30px;
            margin-left: 20px;
            font-size: 40px;
            height: 50px;
            margin-bottom: auto;
            font-family:隶书;
        }
        .us-b{
            margin-top: 160px;
            text-align: center;
            font-size: 15px;
        }

    }

    @media (max-width: 768px){
        .us-title{
            width: 100%;
            height:250px;
            text-align: center;
            font-size: 40px;
            font-weight: bolder;
            font-family: 宋体;
            background-image: url("../../assets/2.jpg");
        }

        .us-main{
            text-align: center;
            width: 90%;
            margin: 0 auto;
        }
        .us-main button{
            width: 150px;
            height: 50px;
            border: 0px;
            font-family: 宋体;
            border-radius: 10px;
            font-size: 20px;
            font-style: inherit;
            color: white;
            margin: 2px 40px 10px 40px;
        }
        .us-text{
            margin-top: 20px;
            margin-left: 40px;
            font-size: 35px;
            font-family:隶书;
            font-weight: lighter;
        }
        .us-b{
            margin-top: 80px;
            text-align: center;
            font-size: 15px;
        }
    }
</style>
